<template>
	<view>
		<u-navbar back-text="返回" :title="orderState"></u-navbar>
		<!-- 顶级容器 -->
		<view class="order-detail-container">
			<!-- top -->
			<view class="">
				<u-card class="order-card" :head-border-bottom="false" :show-head="false">
					<view slot="body">

						<view class="order-location">
							<view class="origin-location">
								<image class="icon" src="../../static/images/departure-place.png" />
								<view class="location-info">
									<text class="title">福州</text>
									<text class="text">福州</text>
								</view>
							</view>
							<u-line class="u-line" color="red" border-style="dotted" length="100rpx" direction="col" />
							<view class="target-location">
								<image class="icon" src="../../static/images/destination-place.png" />
								<view class="location-info">
									<text class="title">厦门</text>
									<text class="text">福州</text>
								</view>
							</view>
						</view>

					</view>
				</u-card>

			</view>

			<!-- content -->
			<view class="">
				<u-cell-group border='false'>
					<u-cell-item icon="setting-fill" title="订单编号" value="22" :border-top="false"></u-cell-item>
					<u-cell-item icon="integral-fill" title="支付方式" value="支付宝" :border-top="true"></u-cell-item>
				</u-cell-group>
			</view>
			<!-- 按钮 -->
			<view class="button-container">
				
					<u-button>取消订单</u-button>
					<u-button type="primary">订单完成</u-button>
			

			</view>
			<!-- 客服 -->
			<view class="contact-container">
				<u-icon name="server-man"></u-icon>
				<text>联系客服</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderState: '出行中'
			}
		},
		methods: {

		}
	}
</script>

<style>
	.order-detail-container {
		padding: 5px;
		/* margin-top: 5px; */
	}

	.order-card {
		margin-bottom: 10px;
		box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
		border-radius: 8px;
		background-color: #ffffff;

	}

	.order-location {
		display: flex;
		flex-direction: column;
		/* align-items: center; */
		align-items: flex-start;
		margin-left: 10px;
	}

	.origin-location,
	.target-location {
		display: flex;
		align-items: center;
		/* Center items vertically */
		/* margin-bottom: 5px; */
		/* Space between rows */
		margin-top: 10px;
	}

	.icon {
		width: 40px;
		/* Adjust icon size as needed */
		height: 40px;
		/* Adjust icon size as needed */
		margin-right: 5px;
		/* Space between icon and detail text */
	}

	.location-info {
		display: flex;
		/* flex-direction: row; /* 确保子元素并列 */
		flex-direction: column;
		/* 子元素上下排列 */
		align-items: center;
		/* 垂直居中对齐（可选） */
	}

	.location-info text {
		margin-left: 5px;
	}

	.title {
		font-size: 18px;
		font-weight: bold;
	}

	.text {
		font-size: 14px;
	}

	.u-line {
		margin-left: 20px;
	}
	.button-container {
	    display: flex;
	    gap: 10px;
	    margin: 10px;
		justify-content: center; 
	}
	
	.u-button {
	    flex: 1; /* 大小相等 */
	}
	.contact-container {
	    display: flex; /* Align children in a row */
	    align-items: center; /* Center items vertically */
	    justify-content: center; /* Center items horizontally */
	    gap: 10px; /* Optional: space between icon and text */
	    margin: 20px; /* Optional: add margin around the container */
	}
	
</style>